<template>
	<Row>
		<Row :gutter="16">
			<Col span="6">
				<Card class="tips red">
					<div class="tips-title">
						CPU使用
					</div>
					<div class="tips-body">
						<span class="value">56</span>
						<span class="unit">%</span>
					</div>
					
					<div class="tips-footer">
						1.25/2.55 Ghz
					</div>
				</Card>
			</Col>
			<Col span="6">
				<Card class="tips blue">
					<div class="tips-title">
						磁盘剩余
					</div>
					<div class="tips-body">
						<span class="value">109</span>
						<span class="unit">GB</span>
					</div>
					
					<div class="tips-footer">
						110255MB可用
					</div>
				</Card>
			</Col>
			<Col span="6">

				<Card class="tips primary">
					<div class="tips-title">
						网络速度
					</div>
					<div class="tips-body">
						<span class="value">1.3</span>
						<span class="unit">MB/s</span>
					</div>
					
					<div class="tips-footer">
						1305kb/s
					</div>
				</Card>
					

			</Col>
			<Col span="6">
				<Card class="tips yellow">
					<div class="tips-title">
						内存剩余
					</div>
					<div class="tips-body">
						<span class="value">6.3</span>
						<span class="unit">GB</span>
					</div>
					
					<div class="tips-footer">
						6555MB内存可用
					</div>
				</Card>
			</Col>
			
		</Row>
		<Row :gutter="16">
			<Col span="16">
			<Card>
				<p>运行状态</p>
				<div id="cpuhis">

				</div>
			</Card>
			</Col>
			<Col span="8">
			<Card>
				<ul class="roominfo">
					<p slot="title">空间使用率</p>
					<div id="diskChart">

					</div>
				</ul>
			</Card>
			</Col>

		</Row>

	</Row>
</template>

<script>
	import echarts from 'echarts'
	import utils from './common/Utils'

	export default {
		data() {
				return {
					cpuChart: null

				}
			},
			mounted() {
				this.initCpuChart();
				this.initDiskChart();
				let _this = this;
				window.onresize = function() {
					_this.cpuChart.resize();
					_this.diskChart.resize();
				}
			},
			beforeRouteEnter(to, from, next) {
				next();
			},
			// 路由改变前，组件就已经渲染完了
			// 逻辑稍稍不同
			beforeRouteUpdate(to, from, next) {
				next();
			},
			methods: {
				initCpuChart() {
					//初始化CPU进度条

					var size = utils.getElementSize('cpuhis');
					size.height = 256;
					let cpuDom = document.getElementById('cpuhis');
					//cpuDom.style.width = size.width + "px";
					cpuDom.style.height = size.height + "px";
					// 基于准备好的dom，初始化echarts实例
					this.cpuChart = echarts.init(cpuDom);
					// 绘制图表
					this.cpuChart.setOption({
						xAxis: {
							type: 'time',
							boundaryGap: false
						},
						tooltip: {
        					trigger: 'axis',
        					formatter: '{c} %'  
    					},
						yAxis: {
							type: 'value',
							max: 100,
							axisLabel: {  
	                  			show: true,  
	                  			interval: 'auto',  
	                  			formatter: '{value} %'  
                			}
						},
						series: [{
							data: [ {name:'2018/05/21 18:38:05', value:['2018/05/21 18:38:05',12]},
    								{name:'2018/05/21 18:38:10', value:['2018/05/21 18:38:10', 13]},
    								{name:'2018/05/21 18:38:15', value:['2018/05/21 18:38:15', 18]},
									{name:'2018/05/21 18:38:20', value:['2018/05/21 18:38:20', 9]},
									{name:'2018/05/21 18:38:25', value:['2018/05/21 18:38:25', 5]},
									{name:'2018/05/21 18:38:30', value:['2018/05/21 18:38:30', 5]},
									{name:'2018/05/21 18:38:35', value:['2018/05/21 18:38:35', 5]},
									{name:'2018/05/21 18:38:40', value:['2018/05/21 18:38:40', 25]},
									{name:'2018/05/21 18:38:45', value:['2018/05/21 18:38:45', 34]},
									{name:'2018/05/21 18:38:50', value:['2018/05/21 18:38:50', 24]},
									{name:'2018/05/21 18:38:55', value:['2018/05/21 18:38:55', 23]},
									{name:'2018/05/21 18:39:05', value:['2018/05/21 18:39:05', 10]}],
							type: 'line',
							symbol:"none",
							lineStyle:{
								color:'#65c3df'
							},
							areaStyle: {
								color:'rgba(45,140,240,0.5)',
							}
						}]
					});
				},
				initDiskChart() {

					var size = utils.getElementSize('diskChart');
					size.height = 256;

					let diskDom = document.getElementById('diskChart');

					diskDom.style.height = size.height + "px";
					// 基于准备好的dom，初始化echarts实例
					this.diskChart = echarts.init(diskDom);
					this.diskChart.setOption({
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b}: {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							x: 'left',
							data: ['占用', '空闲']
						},
						color: ['#FF6B6B','#65C3DF'],
						series: [{
							name: '磁盘占用',
							type: 'pie',
							radius: ['50%', '70%'],
							avoidLabelOverlap: false,
							label: {
								normal: {
									show: false,
									position: 'center'
								},
								emphasis: {
									show: true,
									textStyle: {
										fontSize: '30',
										fontWeight: 'bold'
									}
								}
							},
							labelLine: {
								normal: {
									show: false
								}
							},
							data: [{
								value: 12,
								name: '占用'
							}, {
								value: 88,
								name: '空闲'
							}, ]
						}]
					});

				}
			}
	}
</script>

<style scoped lang="scss">
	.ele {
		text-align: left;
	}
	.ivu-row{
		margin-bottom: 16px;
	}
	
	
	.ivu-card-body{
		text-align: left;
	}
	.tips{
		text-align: left;
		
		.tips-title{
			border-radius: 20px;
			font-size:16px;
			display: inline;
			color:#fff;
			padding: 0 20px;
		}
		.tips-body{
			text-align: center;
		}
		.value{
			font-size: 60px;
			margin-right: 10px;
		}
		
		.unit{
			font-size:27px;
			
		}
		.tips-footer{
			text-align: center;
			color:rgba(0,0,0,0.4);
		}
		
	}
	
	.tips.red{
		.tips-title{
			background: #FF6B6B;
		}
		.value{
			color: #FF6B6B;
		}
		.unit{
			color: #FF6B6B;
		}
	}
	
	.tips.yellow{
		.tips-title{
			background: #FFA200;
		}
		.value{
			color: #FFA200;
		}
		.unit{
			color: #FFA200;
		}
	}
	
	.tips.blue{
		.tips-title{
			background: #65C3DF;
		}
		.value{
			color: #65C3DF;
		}
		.unit{
			color: #65C3DF;
		}
	}
	
	.tips.primary{
		.tips-title{
			background: #45B6B0;
		}
		.value{
			color: #45B6B0;
		}
		.unit{
			color: #45B6B0;
		}
	}
	
</style>